<template>
  <view>
    <Navbar title="分享详情"></Navbar>
    <ShowTips></ShowTips>
    <SlidePage
      ref="swiperDataRef"
      @loadData="loadDataNext"
      :showFooter="!pageOpStore.getOp().showCollect"
    >
      <view class="share-detail">
        <ShareItem :data="shareData" :showDetail="true"></ShareItem>
        <view class="detail">
          <uvParse :content="shareData.content"></uvParse>
        </view>
      </view>
    </SlidePage>
    <Footer
      v-if="pageOpStore.getOp().showCollect"
      :objectId="shareData.shareId + ''"
      :collectType="0"
      @updateCollect="updateCollect"
      :haveCollect="shareData.haveCollect"
    >
    </Footer>
  </view>
</template>

<script setup>
import uvParse from "@/pages/components/uv-parse/components/uv-parse/uv-parse.vue";
import ShareItem from "./ShareItem.vue";
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive, getCurrentInstance, nextTick, computed } from "vue";
const { proxy } = getCurrentInstance();

import { usePageOpStore } from "@/stores/pageOp";
const pageOpStore = usePageOpStore();

const currentId = ref();
const shareData = ref({});
const nextType = ref(null);
const loadDetail = async () => {
  let url = proxy.Api.getShareDetailNext;
  if (!pageOpStore.getOp().showCollect) {
    url = proxy.Api.getCollectNext + "?collectType=0";
  }
  let result = await proxy.Request({
    url: url,
    params: {
      currentId: currentId.value,
      nextType: nextType.value,
    },
  });
  if (!result) {
    return;
  }
  shareData.value = result.data;
  currentId.value = pageOpStore.getOp().showCollect
    ? result.data.shareId
    : result.data.collectId;
};

const loadDataNext = (_nextType) => {
  nextType.value = _nextType;
  loadDetail();
};

onLoad((option) => {
  currentId.value = pageOpStore.getOp().showCollect
    ? option.shareId
    : option.collectId;
  nextType.value = null;
  loadDetail();
});

const updateCollect = (haveCollect) => {
  shareData.value.haveCollect = haveCollect;
};
</script>

<style lang="scss" scoped>
.share-detail {
  .detail {
    padding-top: 10px;
    padding: 10px;
  }
}
</style>